<template>
  <div class="chat-layout">
    <div class="bar-left">
      <sidebar></sidebar>
    </div>
    <div class="bar-right">
      <component :is="sidebarActive"></component>
    </div>
  </div>
</template>

<script>
  import Sidebar from "@/views/chat/Sidebar";
  import ConversationList from "@/views/chat/ConversationList";
  import PersonalCenter from "@/views/chat/PersonalCenter";
  import FriendList from "@/views/chat/FriendList";
  import {mapGetters} from 'vuex'
    export default {
        name: "index",
      components:{
          Sidebar,ConversationList,PersonalCenter,FriendList
      },
      computed:{
          ...mapGetters([
            'sidebarActive'
          ])
      },
      data(){
          return{

          }
      },
      methods:{
      }
    }
</script>

<style scoped>
  .chat-layout{
    /*50 = navbar  */
    display: flex;
    min-height: calc(100vh - 50px);
    width: 100%;
    position: relative;
    overflow: hidden;
  }
  .bar-right{
    width: 100%;
  }
</style>
